<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="nav">
			<view @click="toShujia">跳过&gt;</view>
		</view>
		<!-- 标题 -->
		<view class="con-title">
			<view class="title">让我们更懂你</view>
			<view>选则性别，进入你的专属小说世界</view>
		</view>
		<!-- 卡片 -->
		<view class="con-card">
			<!-- 男生 -->
			<view class="boy">
				<view><image src="../../static/huanying/nan.png" mode=""></image></view>
				<view @click="toJingXuan(1)">我是男生&gt;</view>
			</view>
			<!-- 女生 -->
			<view class="gril">
				<view><image src="../../static/huanying/nv.png" mode=""></image></view>
				<view @click="toJingXuan(0)">我是女生&gt;</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			toShujia(){ //点击跳过按钮
				// console.log(111)
				uni.switchTab({
					url:'../shujia/shujia'
				})
			},
			toJingXuan(i){ //点击我是男生、女生
				// console.log(111)
				uni.switchTab({
					url:'../jingxuan/jingxuan'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	.nav{
		display: flex;
		justify-content: flex-end;
		padding: 65rpx 45rpx;
		view{
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #6B6C70;
			line-height: 50rpx;
		}
	}
	.con-title{
		margin-left: 65rpx;
		view{
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #A7A7A7;
			line-height: 80rpx;
		}
		.title{
			font-size: 52rpx;
			font-weight: bold;
			color: #7F7F7F;
		}
	}
	.con-card{
		padding: 73rpx;
		.boy{
			display: flex;
			width: 604rpx;
			height: 268rpx;
			background: #F4F4F4;
			border-radius: 10px;
			image{
				width: 231rpx;
				height: 229rpx;
				margin-left: 16rpx;
			}
			view{
				font-size: 46rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #3576CA;
				margin-left: 37rpx;
				height: 250rpx;
				line-height: 250rpx;
				
				
			}
		}
		.gril{
			margin-top:12rpx ;
			display: flex;
			width: 604rpx;
			height: 268rpx;
			background: #F4F4F4;
			border-radius: 10px;
			image{
				width: 231rpx;
				height: 229rpx;
				margin-left: 16rpx;
			}
			view{
				font-size: 46rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #E60606;
				margin-left: 37rpx;
				height: 250rpx;
				line-height: 250rpx;
				
				
			}
		}
	}
}
</style>
